<template>
  <div>
    <div class="crumbs mb-20">
      <router-link to="/certificate/certificate/pass">
        <el-button type="success">审核通过</el-button>
      </router-link>
      <router-link to="/certificate/certificate/wait">
        <el-button>等待审核</el-button>
      </router-link>
      <router-link to="/certificate/certificate/failed">
        <el-button>审核失败</el-button>
      </router-link>
      <router-link to="/certificate/certificate/invalid">
        <el-button>证书作废</el-button>
      </router-link>
    </div>
    <div class="crumbs">
      <el-form ref="formInline" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="formInline.keywords" placeholder="请输入……" clearable></el-input>
        </el-form-item>
        <el-form-item label="证书类型">
          <el-select v-model="formInline.type" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提货状态">
          <el-select v-model="formInline.is_pick" clearable placeholder="请选择">
            <el-option v-for="item in optionsTwo" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="转让状态">
          <el-select v-model="formInline.is_transfer" clearable placeholder="请选择">
            <el-option v-for="item in optionsThree" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch('formInline')">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="120"></el-table-column>
      <el-table-column prop="name" label="名称" width="400"></el-table-column>
      <el-table-column prop="create_time" label="创建时间"></el-table-column>
      <el-table-column prop="type_text" label="证书类型" width="130"></el-table-column>
      <el-table-column prop="status_text" label="审核状态" width="130"></el-table-column>
      <el-table-column prop="is_pick_text" label="是否提货" width="130"></el-table-column>
      <el-table-column prop="is_transfer_text" label="转让状态" width="130"></el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="small" @click="see(scope.$index, scope.row)">查看详情</el-button>
          <el-button size="small" @click="cancel(scope.$index, scope.row)">证书作废</el-button>
          <el-button size="small" @click="transfer(scope.$index, scope.row)">转让记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="textData.per_page"
        :total="textData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import notify from '@/tools/notify'

  export default {
    data () {
      return {
        defaultProps: {
          value: 'id',
          label: 'name',
          children: '_child'
        },
        formInline: {
          keywords: '',
          type: '',
          is_pick: '',
          is_transfer: ''
        },
        options: [
          {value: '', label: '全部'},
          {value: 'advanced', label: '高级证书'},
          {value: 'common', label: '普通证书'}
        ],
        optionsTwo: [
          {value: '', label: '全部'},
          {value: '1', label: '已提货'},
          {value: '0', label: '未提货'}
        ],
        optionsThree: [
          {value: '', label: '全部'},
          {value: '1', label: '已转让'},
          {value: '0', label: '未转让'}
        ]
      }
    },
    computed: {
      ...mapState({
        tableData: state => state.certificate.certificateList,
        textData: state => state.certificate.pageData
      })
    },
    created () {
      this.certificatelist()
    },
    methods: {
      // 获取证书列表
      async certificatelist () {
        let payload = {
          page: this.textData.current_page,
          listRows: this.textData.per_page,
          keywords: this.$route.query.keywords,
          type: this.$route.query.type,
          is_pick: this.$route.query.is_pick,
          is_transfer: this.$route.query.is_transfer,
          status: 1
        }
        await this.$store.dispatch('certificate/certificateList', payload)
      },
      onSearch (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push({
              path: '/certificate/certificate/pass',
              query: {
                keywords: this.formInline.keywords,
                type: this.formInline.type,
                is_pick: this.formInline.is_pick,
                is_transfer: this.formInline.is_transfer
              }
            })
            this.certificatelist()
          }
        })
      },
      handleCurrentChange (val) {
        this.textData.current_page = val
        this.certificatelist()
      },
      see (index, row) {
        this.$router.push({name: 'CertificateInfo', params: {id: row.id}})
      },
      transfer (index, row) {
        this.$router.push({name: 'CertificateTransfer', params: {id: row.id}})
      },
      cancel (index, row) {
        this.$confirm('确定作废该证书？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          let payload = {
            id: row.id
          }
          this.$store.dispatch('certificate/certificateCancel', payload).then(res => {
            this.certificatelist()
            notify.success(res.msg)
          })
        }).catch(() => {
          notify.success('取消证书作废')
        })
      }
    }
  }
</script>

<style scoped>
  .crumbs {
    display: inline-block;
    vertical-align: top;
    margin-right: 50px;
  }
</style>
